<template>
    <div class="warpper-box">
      <div class="inner_box">
        <form-create v-model="params.fApi" :rule="params.rule" :option="params.option" 
        @btn-search-click="loadList(true)" 
        @btn-add-click="add(true)"
        @btn-type1-change="function(val){return renderType('type2Id',val,'params','2')}"
        @btn-type2-change="function(val){return renderType('type3Id',val,'params','1')}"
        @btn-reset-click="resetParams"/>
       <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane v-for="(item,index) in tab" :key="index" :label="item.label" :name="item.value">
          <material-list :key="keys" :tableData="tables.tableData" :tableLabel="tables.tableLabel" :models="tables" @on-search-click="loadList" @on-edit-click="add" @on-del-click="del"/>
        </el-tab-pane>
      </el-tabs>
      <el-dialog :title="form.title" :visible.sync="form.visible" :width="form.width" :close-on-click-modal="false">
        <form-create v-model="form.fApi" :rule="form.rule" :option="form.option" @btn-type3-change="function(val){return renderType('parentId',val,'form','1')}" />
        <div slot="footer" class="dialog-footer">
          <el-button size="mini" @click="form.visible = false">取 消</el-button>
          <el-button size="mini" type="primary" @click="formSubmit">保 存</el-button>
        </div>
       </el-dialog>
    </div>
  </div>
</template>
  
  <script>
  import store from '@/store'
  import { 
    PARAMS_MATERIAL_CLASSIFY,
    MATERIAL_CLASSIFY_LABEL1,
    MATERIAL_CLASSIFY_LABEL2,
    MATERIAL_CLASSIFY_LABEL3,
    MATERIAL_TAB,
    FORM_MATERIAL_CLASSIFY1,
    FORM_MATERIAL_CLASSIFY2,
    FORM_MATERIAL_CLASSIFY3,
    OPTION_INLINE,
    OPTION_BLOCK
  } from "./materialModel/material_form"
  import MaterialList from "./materialModel/material_model_list"
  import {getMaterialTypeList,saveMaterialTypeSave,delMaterialType} from "@/api/material_api"
  export default {
    components:{
        MaterialList
    },
    data() {
      return {
        keys:0,
        activeName:"1",
        tab:MATERIAL_TAB,
        params:{
          fApi:{},
          rule:PARAMS_MATERIAL_CLASSIFY,
          option:OPTION_INLINE
        },
        tables:{
          total:0,
          fixed:false,
          width:'180',
          tableData:[],
          tableLabel: MATERIAL_CLASSIFY_LABEL1
        },
        form:{
          id:'',
          title:'新增分类',
          width:"600px",
          visible:false,
          fApi:{},
          rule:[],
          option:OPTION_BLOCK
        },
        page:{
          level:"1",
          pageNum:1,
          pageSize:10,
        }
      };
    },
    mounted() {
      this.selectLevel(false,true,true);
      this.resetParams();
      //this.loadList(true);
    },
    methods: {
      async loadList(formData) {
        let params = this.params.fApi.bind();
        if(formData !== undefined && formData.type === 'page'){
          this.page.pageNum = formData.pageNum;
          this.page.pageSize = formData.pageSize;
        }
        if(formData===true){
          this.page.pageNum = 1;
          this.keys++;
        }
        params.level = this.page.level;
        params.pageNum = this.page.pageNum;
        params.pageSize = this.page.pageSize;
        const req = await getMaterialTypeList(params);
        this.tables.tableData = req.data.list;
        this.tables.tableData.forEach(v=>{
          v.edit=true;v.del=true;
        })
        this.tables.total = req.data.total;
      },
      //通用表单处理  隐藏显示 以及列表
      async selectLevel(type1,type2,type3){
        this.$nextTick(()=>{
          this.params.fApi.hidden(type1,'type1Id');
          this.params.fApi.hidden(type2,'type2Id');
          this.params.fApi.hidden(type3,'type3Id');
        });
        //给第一个select赋值
        this.renderType('type1Id',0,'params','');
      },
      //切换
      handleClick(el){
        this.page.level = el.name;
        if(el.name === '1'){
          this.selectLevel(false,true,true);//处理隐藏显示
          this.tables.tableLabel = MATERIAL_CLASSIFY_LABEL1;//处理列表不同分类字段
        }else if(el.name === '2'){
          this.selectLevel(false,false,true);
          this.tables.tableLabel = MATERIAL_CLASSIFY_LABEL2;//处理列表不同分类字段
        }else if(el.name === '3'){
          this.selectLevel(false,false,false);
          this.tables.tableLabel = MATERIAL_CLASSIFY_LABEL3;//处理列表不同分类字段
        }
        this.resetParams();//刷新页面
      },
      add(row){
        if(row === true){
          this.form.id = '';
          if(this.page.level === '1'){
            this.form.title = '新增一级分类';
            this.form.rule = FORM_MATERIAL_CLASSIFY1;
            this.resetForm();
          }else if(this.page.level === '2'){
            this.form.title = '新增二级分类';
            this.form.rule = FORM_MATERIAL_CLASSIFY2;
            this.resetForm();
            this.renderType('parentId',0,'form','');
          }else if(this.page.level === '3'){
            this.form.title = '新增三级分类';
            this.form.rule = FORM_MATERIAL_CLASSIFY3;
            this.resetForm();
            this.renderType('parentIds',0,'form','');
          }
        }else{
          this.form.id = row.id;
          if(this.page.level === '1'){
            this.form.title = '编辑一级分类';
            this.form.rule = FORM_MATERIAL_CLASSIFY1;
            this.resetForm();
            this.$nextTick(()=>{
              this.form.fApi.setValue({name:row.name,remarks:row.remarks})
            });
          }else if(this.page.level === '2'){
            this.form.title = '编辑二级分类';
            this.form.rule = FORM_MATERIAL_CLASSIFY2;
            this.resetForm();
            this.renderType('parentId',0,'form','');
            this.$nextTick(()=>{
              this.form.fApi.setValue({parentId:row.type1Id,name:row.name,remarks:row.remarks})
            });
          }else if(this.page.level === '3'){
            this.form.title = '编辑三级分类';
            this.form.rule = FORM_MATERIAL_CLASSIFY3;
            this.resetForm();
            this.renderType('parentIds',0,'form','');
            this.renderType('parentId',row.type1Id,'form','');
            this.$nextTick(()=>{
              this.form.fApi.setValue({parentIds:row.type1Id,parentId:row.type2Id,name:row.name,remarks:row.remarks})
            });
          }
        }
        this.form.visible = true;
      },
      async formSubmit(formData) {
        this.form.fApi.submit(async (formData, $f) => {  
          try {
            let text = "新增成功";
            if(this.form.id){
              formData.id = this.form.id;
              text = "修改成功"
            }
            formData.level = this.page.level;
            const req = await saveMaterialTypeSave(formData);
            if (req.code == 200) {
              this.$message.success(text);
              this.form.visible = false;
              this.loadList();
            }
          } catch (error) {
            //this.$message.info(JSON.stringify(error));
          }
        })
      },
      del(row){
        this.$confirm("确认删除", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(async () => {
          let req = await delMaterialType(row.id);
          if(req.code === 200){
            this.$message.success("删除成功");
            this.loadList();
          }
        }).catch(() => {});
      },
      resetParams(){
        this.params.fApi.resetFields();
        this.params.fApi.updateRule('type1Id', {options: []}, true)
        this.params.fApi.updateRule('type2Id', {options: []}, true)
        this.params.fApi.updateRule('type3Id', {options: []}, true)
        this.loadList(true);
      },
      resetForm(){
        this.$nextTick(()=>{
          this.form.fApi.updateRule('parentId', {options: []}, true)
          this.form.fApi.resetFields();
        })
      },
      //处理不同加载
      async renderType(field,val,type,flag){
        //处理选择一级 清空子级数据
        if(type ==='params'){
          if(flag === '2'){
            this[type].fApi.updateRule('type2Id', {options: []}, true);
            this[type].fApi.updateRule('type3Id', {options: []}, true);
            this[type].fApi.setValue({'type3Id':'','type2Id':''});
          }else if(flag === '1'){
            this[type].fApi.updateRule('type3Id', {options: []}, true);
            this[type].fApi.setValue({'type3Id':''});
          }
        }else if(type === 'form'){
          if(flag === '1'){
            this[type].fApi.updateRule('parentId', {options: []}, true);
            this[type].fApi.setValue({'parentId':''});
          }
        }
        let typeArr = await store.dispatch('user/getMaterialTypeSelect',val);
        this.$nextTick(()=>{
          this[type].fApi.updateRule(field, {options: typeArr}, true);
        });
      }
    }
  };
  </script>